Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } .wrapper { width: 100%; height: 100vh; background-color: #252525; display: flex; align-items: center; } .container { width: 100%; max-width: 1400px; margin: 0 auto; overflow: hidden; border: 1px solid teal; height: 300px; } .images-container { display: flex; flex-wrap: nowrap; } .image-card { width: 400px; }
console.log("Event Fired") console.clear(); gsap.registerPlugin(Draggable, InertiaPlugin); const draggableWrapper = document.querySelector(".container"); const imagesContainer = document.querySelector(".images-container"); const tracker = InertiaPlugin.track(imagesContainer, "x")[0]; const clamper = gsap.utils.clamp(-20, 20); window.addEventListener("load", () => { Draggable.create(imagesContainer, { type: "x", bounds: { minX: draggableWrapper.clientWidth - imagesContainer.scrollWidth, maxX: 0 }, onDrag() { const skew = clamper(tracker.get("x") / 200); gsap.set(imagesContainer, { skewX: skew }); }, onRelease() { gsap.to(imagesContainer, { skewX: 0, duration: 0.8, ease: "power1.inOut" }); }, inertia: true }); });